<template>
  <div class="home">
    <div class="top">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(item, index) in bannerList" :key="index">
          <!-- <img v-lazy="item.image" /> -->
          <img style="width: 100%; height: 100px" :src="item.image" alt="" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="container">
      <div class="main">
        <Item v-for="item in goodslist" :key="item.id" :item="item" />
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions, mapState } from "vuex";
import { Swipe, SwipeItem } from "vant";
import { getList, getBannerList } from "../api/banner";
import Item from "@/components/Item.vue";
import BScroll from "better-scroll";
export default {
  components: { Item },
  data() {
    return {
      bannerList: [],
      total: 0,
      pageid: 1,
      limit: 5,
      goodslist: [],
    };
  },
  async mounted() {
    this.$store.dispatch("login/getInfoData");
    this.bannerList = (await getBannerList()).data;
    this.getList();
    debugger;
    this.myBScroll = new BScroll(".container", {
      pullUpLoad: true,
      pullDownRefresh: true,
    });
    this.$nextTick(() => {
      this.myBScroll.on("pullingUp", async () => {
        debugger;
        this.pageid++;
        if (this.pageid <= this.total) {
          await this.getList();
        }
        this.myBScroll.refresh();
        this.myBScroll.finishPullUp();
      });
      this.myBScroll.on("pullingDown", async () => {
        debugger;
        this.pageid = 1;
        this.goodslist = [];
        await this.getList();
      });
    });
  },

  methods: {
    async getList() {
      let data = (await getList({ pageid: this.pageid, limit: this.limit }))
        .data;
      this.total = Math.floor(data.total / this.limit);
      this.goodslist = this.goodslist.concat(data.data);
      debugger;
    },
  },
};
</script>

<style lang="less" scoped>
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}
.container {
  height: calc(100% - 50px);
  flex: 1;
  overflow: hidden;
}
.main {
  overflow: hidden;
}
.home {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 50px);
}
.top {
  width: 100%;
  height: 200px;
  border-bottom: 1px solid red;
}
</style>
